﻿@{
    ViewBag.Title = "Home Page";
}

@*<style>
    .listitem {
        list-style: none;
    }
    .listitem li {
        border: 1px solid Black;
        min-height: 50px;
        padding: 5px;
        margin-bottom: 10px;
        margin-top:10px;
    }
</style>
<script>
    function addProp() {
        var row = "<tr><td><p contenteditable style='height:100%; width:100%'>Property Name</p></td>";
        row += "<td><select><option>Int</option><option>String</option><option>Boolean</option>";
        row += "</select></td></tr>";

        $('#tablebody').append(row);
    }
    function createTable() {
        var tablename = $('#tablename').text();
        var newtable = manager.createEntity('Tables', { TableName: tablename });
        $("#proptable > tbody > tr").each(function () {
            var propname = $(this)[0].cells[0].childNodes[0].innerText;
            var proptype = $(this)[0].cells[1].childNodes[0].value;
            var newprop = manager.createEntity('TableProperty', { PropertyName: propname, PropertyType: proptype, Tables: newtable });
        });
        vm.Table.push(newtable);
        Save();
    }
    function initTable() {
        $(".draggable").draggable({
            helper: 'clone',
            cursor: "move"
        });

        $(".droppable").droppable({
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            greedy: true,
            drop: function (event, ui) {

                var cont = ko.contextFor(ui.draggable[0]).$data;
                ko.cleanNode($("#loadtable")[0]);
                ko.applyBindings(cont, $("#loadtable")[0]);
                $("#table").empty();
                var content = "";
                content += "<table class='table table-bordered'><thead><tr><th>Name</th><th>Type</th></tr></thead>";
                content += "<tbody>";
                for (var i = 0; i < cont.TableProperties().length; i++){
                    content += "<tr><td><p style='height:100%; width:100%'>" + cont.TableProperties()[i].PropertyName() + "</p></td>";
                    content += "<td> <p style='height:100%; width:100%'>" + cont.TableProperties()[i].PropertyType() + "</p></td></tr>";
                }             
                content += "</tbody>";
                $("#table").append(content);

            }
        });
    }
    function generateClass() {
        //GenerateClass
        var command = new breeze.EntityQuery().from("GenerateClass");
        manager.executeQuery(command);


    }
</script>

<div class="col-md-12" style="margin-top:10px;">
    
    <div class="col-md-2">
        <h2>Types list</h2>
        <ul style="list-style:none" data-bind="foreach : Typelist">
            <li style="min-height: 50px;cursor:move"><span data-bind="text: $data, draggable:true"></span></li>
        </ul>
    </div>
    <div id="loadtable" class="col-md-5 column droppable blocktag" style="padding: 15px; height: 100%; min-height: 600px;">
        <div style="border: 1px solid #dddddd; height:40px; margin-top: 10px;">
            <p style="height:100%; width:100%" data-bind="text: $data.TableName"></p>
        </div>
        <div id="table">

        </div>


    </div>
    <div class="col-md-5" style="padding: 15px; height: 100%; min-height: 600px;">
        <div>
            <button onclick="addProp()">Add property</button>
            <button onclick="createTable()">Create table</button>
            <button onclick="generateClass()">Generate dll</button>
        </div>
        <div id="typeList">
            <div style="border: 1px solid #dddddd; height:40px; margin-top: 10px;">
                <p id="tablename" contenteditable style="height:100%; width:100%">Table Name</p>
            </div>
            <table id="proptable" class="table table-bordered">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                    </tr>
                </thead>
                <tbody id="tablebody">
                </tbody>
            </table>
        </div>


    </div>
    
</div>*@

